<template>
  <div class="photo-show" v-if="isShow">
      <!-- 图片操作区域 -->
      <div class="set-area">
          <div class="set-item" @click="closeComponent">收起</div>
          <div class="set-item">查看大图</div>
          <div class="set-item" @click="rotateImg(0)">向左旋转</div>
          <div class="set-item" @click="rotateImg(1)">向右旋转</div>
      </div>
      <!-- 图片展示区域 -->
      <div class="photo-area">
          <div class="wrap">
              <div class="wrap-left" v-show="current!==0" @click="sildeTo(-1)"></div>
              <div class="wrap-mid" @click="closeComponent"></div>
              <div class="wrap-right" v-show="current!==images.length-1" @click="sildeTo(1)"></div>
          </div>
          <img class="photo" :style="angleStyle" :src="images[current]">
      </div>
      <!-- 图片缩略图list -->
      <div class="thum-list" v-if="images.length>1">
        <div class="thum-item" @click="selectImage(index)" :class="current===index?'active':''" v-for="(img,index) in images" :key="index">
            <img :src="img">
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    },
    images: {
      type: Array,
      required: true,
      default () {
        return []
      }
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isShow: this.value,
      current: this.defaultIndex,
      angle: 0
    }
  },
  computed: {
    angleStyle () {
      return {
        transform: `rotate(${this.angle}deg)`
      }
    }
  },
  watch: {
    isShow (newVal) {
      this.$emit('input', newVal)
    },
    value (newVal) {
      this.isShow = newVal
    }
  },
  methods: {
    closeComponent () {
      this.isShow = false
    },
    sildeTo (i) {
      if (i === -1 && this.current === 0) return
      if (i === 1 && this.current === this.images.length - 1) return
      this.selectImage(this.current + i)
    },
    selectImage (index) {
      if (this.current === index) return
      this.angle = 0
      this.current = index
    },
    rotateImg (direction) {
      if (Math.abs(this.angle) === 270) {
        this.angle = 0
        return
      }
      if (direction === 0) {
        this.angle += -90
      } else {
        this.angle += 90
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.photo-show{
    width: 520px;
    .set-area{
        $height: 34px;
        display: flex;
        width: 100%;
        height: $height;
        background: #f4f5f7;
        .set-item{
            height: 100%;
            color: #666;
            font-size: 12px;
            line-height: $height;
            text-align: center;
            margin: 0 16px;
            cursor: pointer;
        }
    }
    .photo-area{
        width: 100%;
        position: relative;
        background: #f4f5f7;
        font-size: 0;
        display: flex;
        justify-content: center;
        .wrap{
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            width: 100%;
            height: 100%;
            z-index: 10;
            div{
                flex: 1;
                &.wrap-left{
                    cursor: url('//s1.hdslb.com/bfs/static/blive/live-assets/canvas/photo-imager/cursor.left.cur?v1'),pointer;
                }
                &.wrap-mid{
                    cursor: zoom-out;
                }
                &.wrap-right{
                    cursor: url("//s1.hdslb.com/bfs/static/blive/live-assets/canvas/photo-imager/cursor.right.cur?v1"),pointer;
                }
            }
        }
        .photo{
            max-width: 520px;
        }
    }
    .thum-list{
        $thum-size: 54px;
        margin-top: 5px;
        display: flex;
        .thum-item{
            margin-right: 4px;
            width:  $thum-size;
            height:  $thum-size;
            cursor: pointer;
            border-radius: 4px;
            opacity: 0.5;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit:  cover;
                border-radius: 4px;
            }
            &.active{
                border: 1px solid #fb7299;
                opacity: 1;
            }
            &:hover{
                opacity: 1;
            }
        }
    }
}
</style>
